import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:xbaistack/common/toast.dart';
import 'package:xbaistack/widget/click_able.dart';
import 'package:xbaistack/widget/swiper_dots.dart';

class SwiperPage extends StatefulWidget {
  const SwiperPage({super.key});

  @override
  State<SwiperPage> createState() => _SwiperPageState();
}

class _SwiperPageState extends State<SwiperPage> {
  int index = 0;
  final List<String> images = [
    'https://picsum.photos/id/1018/1000/600/',
    'https://picsum.photos/id/1015/1000/600/',
    'https://picsum.photos/id/1019/1000/600/',
    'https://picsum.photos/id/1020/1000/600/',
    'https://picsum.photos/id/31/1000/600/',
    'https://picsum.photos/id/32/1000/600/',
  ];
  final icons = const [
    Icon(Icons.home, color: Colors.black),
    Icon(Icons.message, color: Colors.red),
    Icon(Icons.person, color: Colors.black),
    Icon(Icons.home, color: Colors.black),
    Icon(Icons.message, color: Colors.blue),
    Icon(Icons.person, color: Colors.black),
    Icon(Icons.home, color: Colors.black),
    Icon(Icons.message, color: Colors.pink),
    Icon(Icons.person, color: Colors.black),
    Icon(Icons.home, color: Colors.black)
  ];

  Map<String, WidgetBuilder> getContents(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;
    return <String, WidgetBuilder>{
      '图片轮播图（指示器在内部）': (context) => MySwiper(images: images),
      '图片轮播图（指示器在外部）': (context) => MySwiper(images: images, outer: true),
      '堆叠图片轮播': (context) => MySwiper(
        images: images,
        outer: true, // outer 设为 true，即可将分页指示器放在外部
        itemWidth: width - 50, // 这种模式一定要设置 itemWidth，否则要报错
        layout: SwiperLayout.STACK, // 布局模式为堆叠布局),
      ),
      '垂直图片轮播': (context) => MySwiper(
        images: images,
        fade: 0.3, // 进入或者退出容器的内容项透明值会调整到 0.3 倍
        scale: 0.8, // 进入或者退出容器的内容项会缩放至 0.8 倍
        scrollDirection: Axis.vertical, // 滚动方向设置为垂直滚动
        controlAlignment: Alignment.centerRight, // 控制器分布于容器右侧模式为堆叠布局),
      ),
      '突出中心区域的图片轮播': (context) => MySwiper(
        images: images,
        fade: 0.6, // 进入或者退出容器的内容项透明值会调整到 0.5 倍
        scale: 0.8, // 进入或者退出容器的内容项会缩放至 0.9 倍
        viewportFraction: 0.8, // 中心视口区的内容缩放倍率调整至 0.9 倍
      ),
      '突出中心区域的图片轮播（指示器在外侧）': (context) => MySwiper(
        images: images,
        fade: 0.5, // 进入或者退出容器的内容项透明值会调整到 0.5 倍
        scale: 0.9, // 进入或者退出容器的内容项会缩放至 0.9 倍
        viewportFraction: 0.9, // 中心视口区的内容缩放倍率调整至 0.9 倍局模式为堆叠布局),
      ),
      '金刚区效果': (context) => iconWrapper(),
    };
  }

  @override
  Widget build(BuildContext context) {
    final contents = getContents(context);
    final title = contents.keys.elementAt(index);
    final content = contents[title];

    return Scaffold(
      appBar: AppBar(
        shape: const Border(),
        centerTitle: true,
        // leadingWidth: 0,
        // titleSpacing: 10,
        backgroundColor: Colors.green,
        title: Text("${index + 1}/${contents.length} $title"),
        titleTextStyle: const TextStyle(
          fontSize: 16,
          color: Colors.black,
          fontWeight: FontWeight.w500,
        ),
        actions: [
          Clickable(
            disabled: false,
            onTap: () {
              _next(contents);
            },
            child: Padding(
              padding: const EdgeInsets.all(10),
              child: Text(
                '下一个',
                style: TextStyle(color: Colors.red, fontSize: 16),
              ),
            ),
          ),
        ],
      ),
      body: index >= contents.length
          ? const Center(child: Text("没有更多内容了"))
          : Center(child: content?.call(context)),
    );
  }

  void _next(Map<String, WidgetBuilder> contents) {
    setState(() {
      index = index >= contents.length - 1 ? 0 : index + 1;
    });
  }

  Widget iconWrapper() {
    return Container(
      height: 155,
      color: Colors.white,
      padding: const EdgeInsets.only(left: 10, right: 10, top: 10),
      child: Swiper(
        itemCount: 3,
        itemBuilder: (context, pageIndex) {
          return GridView.count(
            crossAxisCount: 5, // 网格列数：5列
            childAspectRatio: 3 / 2, // 网格的高度与宽度的比例，这里设置为宽度值的三分之二
            children: List.generate(icons.length, (index) {
              return GestureDetector(
                onTap: () {
                  Toast.showToast("您点击了第${index + 1}个");
                  // print("您点击了第${index + 1}个");
                },
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    icons[index],
                    const SizedBox(height: 5),
                    Text(
                      "${pageIndex + 1}# 图标",
                      style: const TextStyle(fontSize: 11),
                    ),
                  ],
                ),
              );
            }),
          );
        },
        pagination: const SwiperPagination(
          builder: SwiperDotsPagination(
            roundedRectangleWidth: 20,
            color: Colors.grey,
            activeColor: Colors.redAccent,
          ),
        ),
      ),
    );
  }
}
